<template>
  <view class="container">
    <view class="form">
      <view class="form-item">
        <text class="label">选择户型</text>
        <picker mode="selector" :range="apartmentTypes" @change="onTypeChange">
          <view class="picker">{{ selectedType || '请选择' }}</view>
        </picker>
      </view>
      
      <view class="form-item">
        <text class="label">实际面积（㎡）</text>
        <input type="digit" v-model="area" placeholder="请输入面积" class="input" />
      </view>
      
      <button type="primary" @click="calculate" class="btn">计算造价</button>
    </view>
    
    <view v-if="result" class="result">
      <view class="result-title">造价预估</view>
      <view class="result-item">
        <text class="result-label">单价：</text>
        <text class="result-value">¥{{ result.unit_price }}/㎡</text>
      </view>
      <view class="result-item">
        <text class="result-label">基础造价：</text>
        <text class="result-value">¥{{ result.base_cost }}</text>
      </view>
      <view class="result-item" v-if="result.member_discount > 0">
        <text class="result-label">会员优惠：</text>
        <text class="result-value red">-¥{{ result.member_discount }}</text>
      </view>
      <view class="result-item total">
        <text class="result-label">最终造价：</text>
        <text class="result-value price">¥{{ result.final_cost }}</text>
      </view>
      
      <view v-if="result.configuration_items" class="config">
        <text class="config-title">标准配置清单</text>
        <view v-for="(item, index) in result.configuration_items" :key="index" class="config-item">
          <text>{{ index + 1 }}. {{ item }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { calculatePrice } from '../../api/calculator.js'

export default {
  data() {
    return {
      apartmentTypes: ['A型', 'B型'],
      selectedType: '',
      area: '',
      result: null
    }
  },
  
  methods: {
    onTypeChange(e) {
      this.selectedType = this.apartmentTypes[e.detail.value]
    },
    
    async calculate() {
      if (!this.selectedType) {
        uni.showToast({ title: '请选择户型', icon: 'none' })
        return
      }
      
      if (!this.area || this.area <= 0) {
        uni.showToast({ title: '请输入有效面积', icon: 'none' })
        return
      }
      
      uni.showLoading({ title: '计算中...' })
      
      try {
        const typeCode = this.selectedType === 'A型' ? 'A' : 'B'
        const isMember = !!uni.getStorageSync('token')
        
        const result = await calculatePrice(typeCode, parseFloat(this.area), isMember)
        this.result = result
        
        uni.hideLoading()
      } catch (err) {
        uni.hideLoading()
        uni.showToast({ title: '计算失败', icon: 'none' })
      }
    }
  }
}
</script>

<style scoped>
.container {
  padding: 20rpx;
}

.form {
  background: white;
  padding: 30rpx;
  border-radius: 20rpx;
  margin-bottom: 30rpx;
}

.form-item {
  margin-bottom: 30rpx;
}

.label {
  display: block;
  font-size: 28rpx;
  color: #333;
  margin-bottom: 15rpx;
}

.picker {
  padding: 20rpx;
  background: #f5f5f5;
  border-radius: 10rpx;
}

.input {
  padding: 20rpx;
  background: #f5f5f5;
  border-radius: 10rpx;
}

.btn {
  margin-top: 20rpx;
}

.result {
  background: white;
  padding: 30rpx;
  border-radius: 20rpx;
}

.result-title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 30rpx;
  text-align: center;
}

.result-item {
  display: flex;
  justify-content: space-between;
  padding: 20rpx 0;
  border-bottom: 1rpx solid #f0f0f0;
}

.result-item.total {
  border-top: 2rpx solid #333;
  border-bottom: none;
  margin-top: 10rpx;
  padding-top: 20rpx;
}

.result-label {
  font-size: 28rpx;
  color: #666;
}

.result-value {
  font-size: 28rpx;
  color: #333;
  font-weight: bold;
}

.result-value.red {
  color: #f00;
}

.result-value.price {
  font-size: 36rpx;
  color: #ff5722;
}

.config {
  margin-top: 30rpx;
  padding-top: 30rpx;
  border-top: 1rpx solid #f0f0f0;
}

.config-title {
  display: block;
  font-size: 28rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
}

.config-item {
  padding: 15rpx 0;
  font-size: 26rpx;
  color: #666;
}
</style>

